<template>
  <view>
    <view class="content">
      <uni-forms :model="form" :rules="rules" ref="formRef">
        <!-- 表单内容 -->
        <uni-forms-item name="receiver" class="form-ite">
          <text class="label">收货人</text>
          <input
            class="input"
            placeholder="请填写收货人姓名"
            v-model="form.receiver"
          />
        </uni-forms-item>
        <uni-forms-item name="contact" class="form-item">
          <text class="label">手机号码</text>
          <input
            class="input"
            placeholder="请填写收货人手机号码"
            v-model="form.contact"
          />
        </uni-forms-item>
        <uni-forms-item name="fullLocation" class="form-item">
          <text class="label">所在地区</text>
          <picker
            class="picker"
            mode="region"
            :value="form.fullLocation.split(' ')"
            @change="changeCity"
          >
            <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
            <view v-else class="placeholder">请选择省/市/区(县)</view>
          </picker>
        </uni-forms-item>
        <uni-forms-item name="address" class="form-item">
          <text class="label">详细地址</text>
          <input
            class="input"
            placeholder="街道、楼牌号等信息"
            v-model="form.address"
          />
        </uni-forms-item>
        <uni-forms-item class="form-item">
          <label class="label">设为默认地址</label>
          <switch
            class="switch"
            @change="changeSwitch"
            color="#27ba9b"
            :checked="form.isDefault === 1"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <!-- 提交按钮 -->
    <button class="button" @click="saveAddress">保存并使用</button>
  </view>
</template>

<script>
import {
  setAddress,
  getAddressDetail,
  putMemberAddressByIdAPI,
} from "@/api/address.js"
export default {
  data() {
    return {
      form: {
        receiver: "", // 收货人
        contact: "", // 联系方式
        fullLocation: "", // 省市区(前端展示)
        provinceCode: "", // 省份编码(后端参数)
        cityCode: "", // 城市编码(后端参数)
        countyCode: "", // 区/县编码(后端参数)
        address: "", // 详细地址
        isDefault: 0, // 默认地址，1为是，0为否
      },
      rules: {
        receiver: {
          rules: [{ required: true, errorMessage: "请输入收货人姓名" }],
        },
        contact: {
          rules: [
            { required: true, errorMessage: "请输入联系方式" },
            {
              pattern: "^1[3456789]\\d{9}$",
              errorMessage: "请输入正确的手机号码",
            },
          ],
        },
        fullLocation: {
          rules: [{ required: true, errorMessage: "请选择所在地区" }],
        },
        address: {
          rules: [{ required: true, errorMessage: "请选择详细地址" }],
        },
      },
    }
  },
  onLoad({ id }) {
    uni.setNavigationBarTitle({
      title: id ? "修改地址" : "新增地址",
    })
    if (id) {
      this.getAddressDetail(id)
    }
    this.id = id
  },
  methods: {
    async getAddressDetail(id) {
      const res = await getAddressDetail(id)
      this.form = res.data.result
    },
    async saveAddress() {
      try {
        const res = await this.$refs.formRef.validate()
        console.log(res)
        console.log(this.form)
        const { fullLocation, ...data } = this.form
        if (this.id) {
          await putMemberAddressByIdAPI(this.id, data)
        } else {
          await setAddress(data)
        }
        uni.showToast({
          title: this.id ? "修改成功" : "新增成功",
          icon: "none",
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      } catch (error) {
        uni.showToast({
          title: "请完善信息",
          icon: "none",
        })
      }
    },
    changeSwitch(e) {
      this.form.isDefault = e.detail.value ? 1 : 0
    },
    changeCity(e) {
      // console.log(e)
      this.form.fullLocation = e.detail.value.join(" ")
      // 省市区(后端参数)
      const [provinceCode, cityCode, countyCode] = e.detail.code
      // 合并数据
      Object.assign(this.form, { provinceCode, cityCode, countyCode })
      // this.form.provinceCode = e.detail?.code[0]
      // this.form.cityCode = e.detail?.code[1]
      // this.form.countyCode = e.detail?.code[2]
    },
  },
}
</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
